import React, { Fragment, memo } from 'react'
import type { FC, ReactNode } from 'react'
import { HotRecommendWrapper } from './styled'
import AreaHeaderV1 from '@/components/area-header-v1'
import { useAppSelector } from '@/store'
import { shallowEqual } from 'react-redux'
import PlayListItem from '@/components/play-list-item'

interface Iprops {
  children?: ReactNode
}

const HotRecommend: FC<Iprops> = () => {
  const hotRecommends = useAppSelector(
    (state) => state.recommend.hotRecommends,
    shallowEqual
  )
  return (
    <HotRecommendWrapper>
      <AreaHeaderV1
        title="热门推荐"
        keywords={['华语', '流行', '摇滚', '民谣', '电子']}
        moreLink="/discover/songs"
      ></AreaHeaderV1>
      <div className="lists">
        {hotRecommends.map((item) => (
          <Fragment key={item.id}>
            <PlayListItem itemData={item}></PlayListItem>
          </Fragment>
        ))}
      </div>
    </HotRecommendWrapper>
  )
}
export default memo(HotRecommend)
